HTML SVG Graphics

HTML SVG ভেক্টর গ্রাফিক্স শিখুন

SVG (Scalable Vector Graphics)

SVG XML-এ ভেক্টর-ভিত্তিক গ্রাফিক্স সংজ্ঞায়িত করে যা সরাসরি HTML পৃষ্ঠাগুলিতে এম্বেড করা যেতে পারে।

SVG গ্রাফিক্স স্কেলযোগ্য

যদি সেগুলি বড় করা বা পুনরায় আকার দেওয়া হয় তবে কোনও গুণমান নষ্ট হয় না:

SVG

স্কেল প্রদর্শন করতে উপরে SVG-তে কার্সার রাখুন

🌐ব্রাউজার সমর্থন:

SVG সমস্ত প্রধান ব্রাউজার দ্বারা সমর্থিত।

SVG কি?

Scalable Vector Graphics

SVG মানে স্কেলেবল ভেক্টর গ্রাফিক্স

ওয়েবসাইটে

SVG একটি ওয়েবসাইটের জন্য ভেক্টর-ভিত্তিক গ্রাফিক্স সংজ্ঞায়িত করতে ব্যবহৃত হয়

XML বিন্যাস

SVG XML বিন্যাসে গ্রাফিক্স সংজ্ঞায়িত করে

অ্যানিমেশন

SVG ফাইলের প্রতিটি উপাদান এবং বৈশিষ্ট্য অ্যানিমেটেড হতে পারে

W3C সুপারিশ

SVG হল একটি W3C সুপারিশ

ইন্টিগ্রেশন

SVG অন্যান্য স্ট্যান্ডার্ড যেমন CSS, DOM, XSL এবং JavaScript এর সাথে একীভূত হয়

<svg> উপাদান

HTML <svg> উপাদানটি SVG গ্রাফিক্সের জন্য একটি ধারক।

পাথ, আয়তক্ষেত্র, বৃত্ত, বহুভুজ, পাঠ্য এবং আরও অনেক কিছু আঁকার জন্য SVG-এর অনেক পদ্ধতি রয়েছে।

🎨SVG খসড়া পদ্ধতি:

  • <বৃত্ত> - বৃত্ত আঁকুন
  • <rect> - আয়তক্ষেত্র আঁকুন
  • <লাইন> - লাইন আঁকুন
  • <বহুভুজ> - বহুভুজ আঁকুন
  • <text> - পাঠ্য আঁকুন
  • <পাথ> - জটিল পথ আঁকতে

SVG বৃত্ত

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

বৈশিষ্ট্য বর্ণনা:

  • cx:বৃত্তের কেন্দ্রের x-স্থানাঙ্ক
  • cy:বৃত্তের কেন্দ্রের y- স্থানাঙ্ক
  • r:বৃত্তের ব্যাসার্ধ
  • stroke:সীমানা রঙ
  • stroke-width:বাইরের সীমানা প্রস্থ
  • fill:রঙ পূরণ করুন

SVG আয়তক্ষেত্র

উদাহরণ

<svg width="400" height="120">
  <rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>

বৈশিষ্ট্য বর্ণনা:

  • x:উপরের বাম কোণের x-অর্ডিনেট
  • y:উপরের বাম কোণে y- স্থানাঙ্ক
  • width:আয়তক্ষেত্রের প্রস্থ
  • height:আয়তক্ষেত্রের উচ্চতা

রেজোলিউশন এবং বৃত্তাকার কোণ সহ SVG আয়তক্ষেত্র

উদাহরণ

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

নতুন বৈশিষ্ট্য:

  • rx:x-অক্ষে বৃত্ত কোণার ব্যাসার্ধ
  • ry:y-অক্ষে বৃত্ত কোণার ব্যাসার্ধ
  • opacity:রেজোলিউশন (0.0 থেকে 1.0)
  • style:CSS শৈলী ব্যবহার করে

SVG তারকা

উদাহরণ

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

<বহুভুজ> উপাদান:

points:তারার প্রতিটি শীর্ষবিন্দুর x,y স্থানাঙ্কের একটি তালিকা। প্রতিটি স্থানাঙ্ক কমা দ্বারা পৃথক করা হয়।

SVG গ্রেডিয়েন্ট উপবৃত্তাকার এবং পাঠ্য

উদাহরণ

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>
SVG Sorry, your browser does not support inline SVG.

মূল ধারণা:

  • <defs>:পুনঃব্যবহারযোগ্য সংজ্ঞা রয়েছে
  • <linearGradient>:একটি রৈখিক গ্রেডিয়েন্ট সংজ্ঞায়িত করে
  • fill="url(#grad1)":ভরাট রঙ হিসাবে গ্রেডিয়েন্ট ব্যবহার করে
  • <ellipse>:উপবৃত্ত (cx, cy, rx, ry) সংজ্ঞায়িত করে

SVG এবং ক্যানভাসের মধ্যে পার্থক্য

SVG হল XML-এ 2D গ্রাফিক্স বর্ণনা করার জন্য একটি ভাষা, ক্যানভাস তাৎক্ষণিকভাবে 2D গ্রাফিক্স আঁকে (জাভাস্ক্রিপ্ট সহ)।

SVG সম্পর্কে

  • SVG হল XML-ভিত্তিক, যার মানে হল প্রতিটি উপাদান SVG DOM-এর মধ্যে উপলব্ধ
  • আপনি SVG গ্রাফিক্সের সাথে JavaScript ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারেন
  • এসভিজিতে, প্রতিটি আঁকা আকৃতি একটি বস্তু হিসাবে সংরক্ষণ করা হয়
  • যদি SVG অবজেক্টের বৈশিষ্ট্যগুলি পরিবর্তন করা হয়, ব্রাউজার স্বয়ংক্রিয়ভাবে আকৃতিটি আবার রেন্ডার করবে
  • পরিমাপযোগ্য - কোনো গুণ হারানো ছাড়াই স্কেল করা যেতে পারে

ক্যানভাস সম্পর্কে

  • ক্যানভাস পিক্সেল দ্বারা রেন্ডার করা পিক্সেল
  • ক্যানভাসে, একটি গ্রাফিক আঁকার পরে, ব্রাউজার এটি ভুলে যায়
  • এর অবস্থান পরিবর্তন করার প্রয়োজন হলে, পুরো দৃশ্যটি পুনরায় আঁকতে হবে
  • গ্রাফিক দ্বারা আচ্ছাদিত হতে পারে যে কোনো বস্তু পুনরায় আঁকা আবশ্যক
  • পিক্সেল-ভিত্তিক - জুম করার সময় গুণমান হ্রাস পায়

SVG এবং ক্যানভাসের তুলনা

নীচের টেবিলটি ক্যানভাস এবং এসভিজির মধ্যে কিছু গুরুত্বপূর্ণ পার্থক্য দেখায়:

SVG ক্যানভাস
রেজোলিউশন থেকে স্বাধীন রেজুলেশনের উপর নির্ভর করে
ইভেন্ট হ্যান্ডলারদের জন্য সমর্থন ইভেন্ট হ্যান্ডলারদের জন্য কোন সমর্থন নেই
ভালো উপস্থাপনা দক্ষতা দুর্বল টেক্সটিং দক্ষতা
জটিল হলে স্লো ডেলিভারি ক্রীড়া অ্যাপ্লিকেশনের জন্য উপযুক্ত
ক্রীড়া অ্যাপ্লিকেশনের জন্য উপযুক্ত নয় আপনি ফলস্বরূপ চিত্রটিকে .png বা .jpg হিসাবে সংরক্ষণ করতে পারেন৷
DOM-এ ম্যানিপুলেশন গ্রাফিক-নিবিড় গেমের জন্য উপযুক্ত

🤔কখন কী ব্যবহার করবেন:

SVG ব্যবহার করুন:আইকন, চার্ট, গ্রাফ, লোগো, UI উপাদান
ক্যানভাস ব্যবহার করুন:গেমস, ইমেজ এডিটিং, ইনস্ট্যান্ট গ্রাফিক্স, পিক্সেল ম্যানিপুলেশন

ইন্টারেক্টিভ SVG ডেমো

🎮SVG উপাদানগুলির সাথে যোগাযোগ করুন

ক্লিকযোগ্য উপাদান

ক্লিক করুন এবং SVG উপাদান দেখুন

SVG এর সুবিধা:

পরিমাপযোগ্য - কোনো গুণ হারানো ছাড়াই স্কেল করা যেতে পারে
ইভেন্ট হ্যান্ডলিং - প্রতিটি উপাদান ক্লিকযোগ্য
XML ভিত্তিক - SEO বন্ধুত্বপূর্ণ এবং অ্যাক্সেস করা সহজ
CSS এর সাথে স্টাইলযোগ্য - CSS ব্যবহার করে স্টাইল করা যেতে পারে
অ্যানিমেশন- CSS বা JavaScript দিয়ে অ্যানিমেশন করা যায়

এসভিজি টিউটোরিয়াল

SVG সম্পর্কে আরও জানতে, আমাদের SVG টিউটোরিয়াল পড়ুন।

মৌলিক SVG আকার

  • বৃত্ত - বৃত্ত
  • rect - আয়তক্ষেত্র
  • ellipse - উপবৃত্ত
  • লাইন - সরল রেখা
  • পলিলাইন - পলিলাইন
  • বহুভুজ - বহুভুজ

SVG গুণাবলী

  • fill - রঙ পূরণ করুন
  • স্ট্রোক - রূপরেখার রঙ
  • স্ট্রোক-প্রস্থ - স্ট্রোক প্রস্থ
  • অস্বচ্ছতা - স্বচ্ছতা
  • রূপান্তর - পরিবর্তন
  • শৈলী - CSS শৈলী

📚SVG শেখার সম্পদ:

আপনি SVG গ্রাফিক্স তৈরি এবং ম্যানিপুলেট করার জন্য JavaScript এবং CSS জ্ঞান উপযোগী পাবেন। SVG-এর নিজস্ব DOM (ডকুমেন্ট অবজেক্ট মডেল), HTML DOM-এর মতোই।